<template>
  <div>
   <h1>Vue基础语法---响应式数据</h1>
   <p>响应式数据:数据变了,视图会自动更新</p>
    <p>怎样让数据显示在页面中的式html模板的语法----{{}}插值语法+指令</p>
    <p>{{ num }}</p>

    <p>{{ rune }}</p>
    <p>{{ p }}</p>
    
    <input type="button" value="num变化" @click="ChangNum">
    <input type="button" value="rune变化" @click="Chang">
    <input type="button" value="p变化" @click="ChangP">
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
 let num =ref(100);
 let rune = ref("好好学习")

 let p = reactive({
  name:'张三',
  age:20,
  friends:["何启强","王玺","任二蛋"]
 })
 const ChangNum=()=>{
  num.value++;
  console.log(num.value);
 }

 const Chang=()=>{
  rune.value="天天向上";
 }

 const ChangP=()=>{
  p.name="小虫虫";
 }
</script>

<style scoped>

</style>